
/**
 * 设置元素的偏移量
 */
function setPostion(el, [x, y]) {
  el.style.left = x + "px";
  el.style.top = y + "px";
}
/**
 * 根据传入的els，获取元素左上角在屏幕中的位置
 */
function getPostion(els) {
  const posArr = [];
  let startX = 0,
    startY = 0,
    el = null;

  for (let i = 0; i < els.length; i++) {
    el = els[i];

    // 获取元素在屏幕中的位置 相对于开启定位的祖先元素进行计算的，
    // 如果没有则以body元素进行
    startX = el.offsetLeft;
    startY = el.offsetTop;

    posArr.push({
      startX,
      startY,
      el,
    });
  }
  return posArr;
}
/**
 * 设置动画
 */
function setAnimation(el) {
  // 加上 transition 动画，让盒子回弹效果更加顺滑
  const transitionDuration = ".3s",
    transitionTimeFunction = "ease-in-out";
  el.style.transition = `top ${transitionDuration} ${transitionTimeFunction}, left ${transitionDuration} ${transitionTimeFunction}`;
}
/**
 * 根据鼠标释放时候的位置、所有空元素的位置、已填充的位置，获得可以摆放的空位置下标
 */
function getUseableIndex(screenX, screenY, emptyCellsPos, fillResArr) {
  for (let i = 0; i < emptyCellsPos.length; i++) {
    let { startX, startY, el: emptyEl } = emptyCellsPos[i]; // 某个空白块的左上角，在屏幕中的坐标
    // 该空白块已经被填充了，跳过本次循环
    if (fillResArr[i]) {
      useableIndex = -1;
      continue;
    }
    // 判断鼠标是否在当前的空白盒子中
    if (
      screenX > startX &&
      screenX < startX + cellW &&
      screenY > startY &&
      screenY - 120 < startY + cellH
    ) {
      for (let i = 0; i < emptyCellsPos.length; i++) {
        emptyCellsPos[i].el.childNodes[0].style.backgroundColor = "";
      }
      emptyEl.childNodes[0].style.backgroundColor = "#dbfce6";
      useableIndex = i;
      break;
    } else {
      useableIndex = -1;
    }
  }
}

export {
  setPostion,
  getPostion,
  setAnimation,
  getUseableIndex
}